<!DOCTYPE html>
<html ng-app="webapp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>W11</title>
    <script src="js/angular-1.4.8.min.js"></script>
</head>

<body>
    <div layout="row">
        <div flex="28">
            <a href="#home" class="btn btn-success btn-lg">Home</a>
            <br>
            <a href="#about" class="btn btn-danger btn-lg">About</a>
        </div>
        <div flex="71" ng-controller="myCtrl">

          Delayed Message: {{message}}  

        </div>
    </div>
</body>

</html>
<script type="text/javascript">
  var app = angular.module('webapp', []);
  app.controller('myCtrl', ['$scope','$log','$timeout', function($scope,$log,$timeout) {

      // $scope.getMessage = function() {  
      //   setTimeout(function() {  
      //     $scope.message = 'Fetched after 3 seconds';  
      //     console.log('message:'+$scope.message);  
      //   }, 2000);  
      // }  
        
      // $scope.getMessage = function() {  
      //   setTimeout(function() {  
      //     $scope.$apply(function(){
      //       $scope.message = 'Fetched after 3 seconds';  
      //       console.log('message:'+$scope.message); 
      //     });

      //   }, 2000);  
      // }  

      

      $scope.getMessage = function() {  
        $timeout(function() {  

            $scope.message = 'Fetched after 3 seconds';  
            console.log('message:'+$scope.message); 


        }, 2000);  
      }  

      $scope.getMessage();

  }]);




</script>
